<template>
  <el-container>
    <el-main>
      <div ref="content" class="containers">
        <div ref="canvas" class="canvas" />
      </div>
    </el-main>
  </el-container>
</template>
<script>
// 引入相关的依赖
import CmmnModeler from 'cmmn-js/lib/Modeler'
import camundaModdleDescriptor from 'camunda-cmmn-moddle/resources/camunda'

export default {
  data () {
    return {
      cmmnModeler: null,
      container: null,
      canvas: null
    }
  },
  mounted () {
    // 获取到属性ref为“content”的dom节点
    this.container = this.$refs.content
    // 获取到属性ref为“canvas”的dom节点
    const canvas = this.$refs.canvas
    // 建模，官方文档这里讲的很详细
    this.cmmnModeler = new CmmnModeler({
      container: canvas,
      moddleExtensions: {
        camunda: camundaModdleDescriptor
      }
    })
    this.openDiagram(this.cmmnModeler)
  },
  methods: {
    openDiagram (cmmnModeler) {
      const cmmnXmlStr = '<?xml version="1.0" encoding="UTF-8"?>\n' +
			'<cmmn:definitions xmlns:dc="http://www.omg.org/spec/CMMN/20151109/DC" xmlns:cmmndi="http://www.omg.org/spec/CMMN/20151109/CMMNDI" xmlns:cmmn="http://www.omg.org/spec/CMMN/20151109/MODEL" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" id="Definitions_02xmelg" targetNamespace="http://bpmn.io/schema/cmmn" exporter="Camunda Modeler" exporterVersion="3.4.1">\n' +
  			'<cmmn:case id="Case_1cozor9">\n' +
    		'<cmmn:casePlanModel id="CasePlanModel_0ln15ek" name="A CasePlanModel">\n' +
      		'<cmmn:planItem id="PlanItem_1" definitionRef="Task_1" />\n' +
      		'<cmmn:task id="Task_1" />\n' +
    		'</cmmn:casePlanModel>\n' +
  			'</cmmn:case>\n' +
  			'<cmmndi:CMMNDI>\n' +
  			'<cmmndi:CMMNDiagram id="init_cmmn_id" name="init_cmmn_name">\n' +
  			'<cmmndi:Size width="500" height="500" />\n' +
  			'<cmmndi:CMMNShape id="DI_CasePlanModel_0ln15ek" cmmnElementRef="CasePlanModel_0ln15ek">\n' +
			'<dc:Bounds x="154" y="99" width="534" height="389" />\n' +
			'<cmmndi:CMMNLabel />\n' +
			'</cmmndi:CMMNShape>\n' +
			'<cmmndi:CMMNShape id="PlanItem_1_di" cmmnElementRef="PlanItem_1">\n' +
			'<dc:Bounds x="190" y="132" width="100" height="80" />\n' +
			'<cmmndi:CMMNLabel />\n' +
			'</cmmndi:CMMNShape>\n' +
			'</cmmndi:CMMNDiagram>\n' +
			'</cmmndi:CMMNDI>\n' +
			'</cmmn:definitions>\n'

      cmmnModeler.importXML(cmmnXmlStr, function (err) {
        if (err) {
          return console.error('无法导入CMMN 2.0流程图', err)
        }
        const canvas = cmmnModeler.get('canvas')
        canvas.zoom('fit-viewport')
        canvas.addMarker('init_cmmn_id')
      })
    }
  }
}
</script>
<style>
.el-container {
	position: absolute;
	background-color: #ffffff;
	width: 100%;
	height: 100%;
}
.containers {
	position: absolute;
	background-color: #ffffff;
	width: 100%;
	height: 100%;
}
.canvas{
	width: 100%;
	height: 100%;
}
.panel{
	position: absolute;
	right: 0;
	top: 0;
	width: 300px;
}
</style>
